<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        /* background-image: url(image/WalkingCentral_ZH-CN6818231087_1920x1080.jpg); */
    }
</style>

<body>
    <!-- <h1>1111</h1> -->
    <canvas></canvas>
</body>
<script>
    (function() {
        // canvas 实现 watermark
        function __canvasWM({
            // 使用 ES6 的函数默认值方式设置参数的默认取值
            // 具体参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters
            container = document.body,
            width = '400px',
            height = '300px',
            textAlign = 'center',
            textBaseline = 'middle',
            font = "20px Microsoft Yahei",
            fillStyle = 'rgba(17, 17, 17, 0.50)',
            content = '请勿外传',
            rotate = '30',
            zIndex = 2147483647
        } = {}) {
            const args = arguments[0];
            const canvas = document.createElement('canvas');
            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);
            const ctx = canvas.getContext("2d");
            ctx.textAlign = textAlign;
            ctx.textBaseline = textBaseline;
            ctx.font = font;
            ctx.fillStyle = fillStyle;
            ctx.rotate(Math.PI / 180 * rotate);
            var lines = content.split('\n');
            // console.log(lines);


            for (var i = 0; i < lines.length; i++) {
                ctx.fillText(lines[i], 150, 30 + (i * 25));
            }
            //ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

            for (var i = 0; i < lines.length; i++) {
                ctx.fillText(lines[i], 150, 30 + (5 * 25));
            }
            //ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);

            for (var i = 0; i < lines.length; i++) {
                ctx.fillText(lines[i], 150, 150 + (5 * 25));
            }
            ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
            // ctx.fillText('originDu, 150, 0');
            const base64Url = canvas.toDataURL();
            const __wm = document.querySelector('.__wm');

            const watermarkDiv = __wm || document.createElement("div");
            const styleStr = `
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          z-index:${zIndex};
          opacity: 0.2;
          pointer-events:none;
          background-repeat:repeat;
          background-image:url('${base64Url}')`;
            watermarkDiv.setAttribute('style', styleStr);
            watermarkDiv.classList.add('__wm');
            if (!__wm) {
                container.style.position = 'relative';
                container.insertBefore(watermarkDiv, container.firstChild);
            }

            const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
            if (MutationObserver) {
                let mo = new MutationObserver(function() {
                    const __wm = document.querySelector('.__wm');
                    // 只在__wm元素变动才重新调用 __canvasWM
                    if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) {
                        // 避免一直触发
                        mo.disconnect();
                        mo = null;
                        __canvasWM(JSON.parse(JSON.stringify(args)));
                    }
                });
                mo.observe(container, {
                    attributes: true,
                    subtree: true,
                    childList: true
                })
            }
        }
        if (typeof module != 'undefined' && module.exports) { //CMD
            module.exports = __canvasWM;
        } else if (typeof define == 'function' && define.amd) { // AMD
            define(function() {
                return __canvasWM;
            });
        } else {
            window.__canvasWM = __canvasWM;
        }
    })();
    // 调用
    __canvasWM({
        content: '神手SDK'
    });
</script>

</html>